<template>
  <div>
    <div v-if="active == 'home'"><message /></div>
    <div v-if="active == 'friends'"><Contact /></div>
    <div v-if="active == 'search'"><piazza /></div>
    <div v-if="active == 'setting'"><My /></div>
  <div>
    <van-tabbar v-model="active">
      <van-tabbar-item name="home" icon="home-o" @click="messageEvent('home')">消息</van-tabbar-item>
      <van-tabbar-item name="search" icon="search" @click="piazzaEvent('search')">广场</van-tabbar-item>
      <van-tabbar-item name="friends" icon="friends-o" @click="ContactEvent('friends')">联系人</van-tabbar-item>
      <van-tabbar-item name="setting" icon="setting-o" @click="SettingEvent('setting')">我的</van-tabbar-item>
    </van-tabbar>

  </div>
  </div>
  
</template>

<script setup>
import { ref, onMounted, reactive, } from 'vue'
import { useRoute } from 'vue-router';
import message from './nav/message.vue';
import piazza from '../components/nav/piazza.vue'
import Contact from './nav/Contact.vue';
import My from './nav/My.vue';
const active = ref('home')
const messageEvent = (e)=>{
 
 active.value = e
 console.log(active.value);
}
const piazzaEvent = (e)=>{
 
 active.value = e
 console.log(active.value);
}
const ContactEvent = (e)=>{
 active.value = e
 console.log(active.value);
}
const SettingEvent = (e)=>{
  active.value = e
 console.log(active.value);
}
onMounted(() => {


})
</script>

<style scoped>

</style>